<template>
  <div>
    <el-tabs
      v-if="cnShow&&enShow"
      type="card"
    >
      <el-tab-pane :label="$t('sysManagement.chineseInformation')">
        <tiny-mce
          ref="contentRef"
          v-model="contentCN.content"
          style="width: 95%"
        />
      </el-tab-pane>
      <el-tab-pane :label="$t('sysManagement.englishInformation')">
        <tiny-mce
          ref="contentRef"
          v-model="contentEN.content"
          style="width: 95%"
        />
      </el-tab-pane>
    </el-tabs>
    <el-button
      style="margin-top: 10px"
      type="primary"
      @click="saveSubmit"
    >
      {{
        $t("crud.saveBtn")
      }}
    </el-button>
  </div>
</template>

<script setup>
import TinyMce from '@/components/tiny-mce/index.vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  params: {
    type: Object,
    default: () => {
      return {
        title: '',
        keyCN: '',
        keyEN: '',
        remarkCN: '',
        remarkEN: ''
      }
    }
  }
})

const cnShow = ref(false)
const enShow = ref(false)

// 中文配置信息
const contentCN = reactive({
  content: ''
})
// 英文配置信息
const contentEN = reactive({
  content: ''
})
onMounted(() => {
  init()
})

const init = () => {
  nextTick(() => {
    http({
      url: http.adornUrl('/sys/pconfig/info/' + props.params.keyCN),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      if (data) {
        contentCN.content = JSON.parse(data)?.content || ''
      }
      cnShow.value = true
    })
    http({
      url: http.adornUrl('/sys/pconfig/info/' + props.params.keyEN),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      if (data) {
        contentEN.content = JSON.parse(data)?.content || ''
      }
      enShow.value = true
    })
  })
}

const saveSubmit = () => {
  http({
    url: http.adornUrl('/sys/pconfig/save'),
    method: 'post',
    data: http.adornData({
      paramKey: props.params.keyCN,
      paramValue: JSON.stringify(contentCN),
      remark: props.params.remarkCN
    })
  })
  http({
    url: http.adornUrl('/sys/pconfig/save'),
    method: 'post',
    data: http.adornData({
      paramKey: props.params.keyEN,
      paramValue: JSON.stringify(contentEN),
      remark: props.params.remarkEN
    })
  }).then(() => {
    ElMessage({
      message: $t('publics.operation'),
      type: 'success',
      duration: 1500
    })
  })
}

</script>
